<template>
    <div id="proDetail">
        <div class="page-title">商品详情</div>
        <div class="container">
            <div class="content">
                <div class="pro">
                    <div class="sku">
                        <div class="img">
                            <el-image :src="detail.shangping_data.shangping_tupian" class="img-full"
                                      alt="">
                                <div slot="placeholder" class="placeholder">
                                    <i class="el-icon-loading"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="info">
                            <div class="title ">
                                {{detail.shangping_data.shangping_mingcheng}}
                            </div>
                            <div class="price">
                                <div class="num">
                                    售价：<span class="text-lg text-danger font-bold">¥ {{(detail.shangping_data.shangping_danjia/100).toFixed(2)}}</span>
                                </div>
                                <div class="counter">
                                    <div class="comment">
                                        <div>{{
                                            detail.shangping_data.haoping_shuliang +
                                            detail.shangping_data.zhongping_shuliang +
                                            detail.shangping_data.chaping_shuliang
                                            }}
                                        </div>
                                        <div>最近评价</div>
                                    </div>
                                    <div class="border">&nbsp;</div>
                                    <div class="sale">
                                        <div>{{ detail.shangping_data.shangping_xiaoliang}}</div>
                                        <div>最近销量</div>
                                    </div>
                                </div>


                            </div>
                            <div class="m-t-md  pos-rlt">
                                数量：
                                <el-input-number v-model="ruleForm.goumai_shuliang" size="small" :min="1"
                                                 :max="detail.shangping_data.kucun_shuliang"
                                                 label="描述文字"></el-input-number>
                                <span class="m-l"> {{detail.shangping_data.kucun_shuliang | stock}} </span>
                                <img class="down-status" v-if="detail.shangping_data.shangping_zhuangtai === 2 || detail.shangping_data.shangping_zhuangtai === 0"
                                     src="../assets/imgs/down.png" alt="">

                            </div>
                            <div class="m-t-md ">
                                状态：{{detail.shangping_data.shangping_zhuangtai | productStatus}}


                            </div>
                            <div class="m-t-md bottom">
                                <span>发货方式：自动发货</span>
                                <el-button type="primary" @click="dialogVisible = true"
                                           :disabled="!detail.shangping_data.kucun_shuliang || detail.shangping_data.shangping_zhuangtai !== 1">
                                    立即购买
                                </el-button>
                            </div>


                        </div>
                    </div>
                    <div class="seller">
                        <div class="head">
                            <div class="img">
                                <img src="../assets/imgs/seller-img.png" alt="">
                            </div>
                            <div class="name">
                                <div class="m-t-sm">商户ID：{{ detail.shangping_data.guishu_id}}</div>
                                <el-rate
                                        class="m-t-xs"
                                        v-model="detail.shanghu_data.shanghu_xinyong"
                                        disabled
                                        disabled-void-color="#d3d3d3"
                                        text-color="#ff9900"
                                >
                                </el-rate>
                            </div>
                        </div>
                        <div class="counter">
                            <div>
                                质量
                                <div class="text-danger">{{ (detail.shanghu_data.pingfen_zhiliang || 5).toFixed(2)}}
                                </div>
                            </div>
                            <div class="border">&nbsp;</div>
                            <div>
                                效率
                                <div class="text-danger">{{ (detail.shanghu_data.pingfen_cengjiap || 5).toFixed(2)}}
                                </div>
                            </div>
                            <div class="border">&nbsp;</div>
                            <div>
                                服务
                                <div class="text-danger">{{ (detail.shanghu_data.pingfen_fuwu || 5).toFixed(2)}}</div>
                            </div>
                        </div>
                        <div class="foot padder m-t-xs">
                            <div class="text-center"><i class="iconfont  icon-baozhengjindanbao text-success "
                                                        style="font-size: 60px"></i>
                            </div>


                            <div class="text-center">
                                <span>已缴纳</span>
                                <span class="m-t text-2x text-danger font-bold">
                                {{(detail.shanghu_data.baozhenjin / 100).toFixed(2)}} 元
                            </span>
                                <span>保证金</span>
                            </div>


                        </div>
                    </div>
                </div>
                <div class="detail">
                    <hot-game-list :data="detail.remai_data"></hot-game-list>
                    <div class="introduce">
                        <el-button-group class="btns">
                            <el-button :type="activeName === 'first'?'primary':'default'" @click="activeName = 'first'"
                                       plain size="small">宝贝详情
                            </el-button>
                            <el-button :type="activeName === 'second'?'primary':'default'" @click="toComment" plain
                                       size="small">累计评价
                            </el-button>
                        </el-button-group>
                        <div class="quill-editor ql-editor">
                            <div v-html="detail.shangping_data.shangping_jieshao" class="html"></div>


                            <div class="comment" ref="comment">
                                <div class="filter">
                                    <span class="title">近期评价</span>
                                    <el-radio-group v-model="commentForm.leixing" @change="changeRate">
                                        <el-radio v-for="(item,key) in rateTypes" :label="key" :key="key"
                                                  :disabled="!rateNum(key)"
                                        >
                                            {{item}}({{rateNum(key)}})
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                                <template v-if="total">
                                    <div class="comment-item" v-for="item in commentList" :key="item.Id">
                                        <div class="img">
                                            <img :src="item.pingjia_yonghu_touxiang" alt="">
                                            <div>
                                                <el-rate
                                                        v-model="item.pingjia_yonghu_xinyong"
                                                        disabled
                                                        disabled-void-color="#fafbfc"
                                                >
                                                </el-rate>
                                            </div>
                                        </div>
                                        <div class="content">
                                            <div class="text">
                                                {{item.pingjia_neirong}}
                                            </div>
                                            <div class="time m-t-md">
                                                {{item.create_time}}
                                            </div>
                                        </div>
                                    </div>
                                    <pagination :total="total" :options="commentForm"
                                                @change="getComment"></pagination>
                                </template>
                                <div v-else>
                                    暂无评价
                                </div>

                            </div>
                        </div>
                        <!--<el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="宝贝详情" class="quill-editor ql-editor" name="first">

                            </el-tab-pane>
                            <el-tab-pane label="累计评价" name="second" class="comment">

                            </el-tab-pane>


                        </el-tabs>-->
                    </div>
                </div>
            </div>
            <!-- <div class="right-side">
                 <hot-game-list></hot-game-list>
                 <hot-game-list></hot-game-list>
             </div>-->
        </div>
        <el-dialog
                title="确认订单"
                :visible.sync="dialogVisible"
                width="45%"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名字：" prop="name">
                    {{detail.shangping_data.shangping_mingcheng}}
                </el-form-item>
                <el-form-item label="商品单价：" prop="name">
                    <span class="text-lg text-danger font-bold">¥ {{(detail.shangping_data.shangping_danjia/100).toFixed(2)}}</span>
                </el-form-item>
                <el-form-item label="商品数量：" prop="name">
                    <el-input-number v-model="ruleForm.goumai_shuliang" size="small" :min="1"
                                     :max="detail.shangping_data.kucun_shuliang"
                                     label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="商品总额：" prop="name">
                   <span class="text-lg text-danger font-bold">¥ {{(ruleForm.goumai_shuliang * (detail.shangping_data.shangping_danjia/100)).toFixed(2)}}
                   </span>
                </el-form-item>
                <el-form-item label="优惠卷">
                    <el-select v-model="ruleForm.youhuiquan_id" placeholder="选择优惠券" class="m-b-md">
                        <el-option
                                v-for="item in tickets"
                                :key="item.Id"
                                :label="item.jiangli_mingcheng"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" prop="beizhu">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="ruleForm.beizhu">
                    </el-input>
                </el-form-item>
                <div class="double">
                    <el-form-item label="支付密码：" prop="zhifu_mima" class="">
                        <el-input
                                type="password"
                                placeholder="请输入内容"
                                v-model="ruleForm.zhifu_mima">
                        </el-input>
                    </el-form-item>
                    <div class="text-muted m-b-md">
                        默认支付密码为123123
                    </div>

                </div>

            </el-form>
            <!--购买成功-->
            <el-dialog
                    title="购买成功(收到货后请及时确认收货)"
                    :visible.sync="buySuccessDialog"
                    width="30%"
                    append-to-body
            >
                <div>
                    卡号：TKsaidhwoadijsaoihaiofhoa4sd64

                    卡号：TKsaidhwoadijsaoihaiofhoa4sd64

                    卡号：TKsaidhwoadijsaoihaiofhoa4sd64
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="buySuccessDialog = false">取 消</el-button>
                <el-button type="primary" @click="buySuccessDialog = dialogVisible= false">确 定</el-button>
            </span>
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="buy" :loading="buyLoading">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import HotGameList from "../components/hotGameList";

    export default {
        name: 'productDetail',
        components: {HotGameList},
        data() {
            return {
                num: 1,
                value: 3,
                activeName: 'first',
                rateType: '0',
                rateTypes: {
                    0: '全部',
                    1: '好评',
                    2: '中评',
                    3: '差评',
                },
                dialogVisible: false,
                buySuccessDialog: false,
                textarea: '',
                //购买表单
                ruleForm: {
                    shop_id: '',
                    goumai_shuliang: '',
                    youhuiquan_id: 0,
                    zhifu_mima: '',
                    beizhu: '',
                },
                buyLoading: false,
                rules: {
                    zhifu_mima: [
                        {required: true, message: '请输入支付密码', trigger: 'blur'},
                    ],
                },
                //评价搜索
                commentForm: {
                    shop_id: '',
                    page: 1,
                    leixing: '0'
                },
                options: [],
                detail: {
                    shangping_data: {},
                    shanghu_data: {
                        pingfen_zhiliang: 0,
                        pingfen_fuwu: 0,
                        pingfen_cengjiap: 0,
                        baozhenjin: 0
                    },
                    pingjia_data: [],
                    remai_data: []
                },
                commentList: [],
                rateTypeNum: {
                    chaping_shuliang: 0,
                    haoping_shuliang: 0,
                    zhongping_shuliang: 0,
                },
                total: 0,
                //优惠券列表
                tickets: []
            }
        },
        computed: {},
        filters: {
            stock(val) {
                if (!val) return '库存不足';
                if (val > 1 && val <= 20) return '库存量少';
                if (val >= 21) return '库存充足';
            },
            productStatus(val) {
                let obj = {
                    0: '仓库中',
                    1: '上架中',
                    2: '回收站'
                };
                return obj[val]
            }
        },
        watch: {
            '$route'() {
                this.init();
            }
        },
        methods: {
            //切换评价列表
            changeRate() {
                this.commentForm.page = 1;
                this.getComment();
            },
            //滚动到评价
            toComment() {
                this.activeName = 'second';
                document.querySelector('.main').scrollTo({
                    top: this.$refs.comment.offsetTop - 60,
                    behavior: "smooth"
                })
            },
            /**
             * 购买
             */
            buy() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.$confirm('是否确认购买该商品?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '我再想想',
                            type: 'warning'
                        }).then(() => {
                            this.buyLoading = true;
                            this.$axios.post(`/api/user/goumai_shop`, this.ruleForm)
                                .then(res => {
                                    if (res.code === '200') {
                                        this.$message.success('购买成功');
                                        this.$router.push({name: 'bought'})
                                    }
                                }).finally(() => {
                                this.buyLoading = false;
                            })
                        })
                    }
                })


            },
            /**
             * 获取详情
             * */
            getDetail() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/get_shop`, {shop_id: this.commentForm.shop_id})
                        .then(res => {
                            if (res.code === `200`) {
                                let {shangping_data, shanghu_data, pingjia_data, remai_data} = res.data;
                                this.detail.shanghu_data = shanghu_data;
                                this.detail.shangping_data = shangping_data;
                                this.detail.pingjia_data = pingjia_data;
                                this.detail.remai_data = remai_data;
                                resolve()
                            }
                        })
                })
            },
            /**
             * 获取评论
             */
            getComment() {
                let form = Object.assign({}, this.commentForm)
                form.leixing = form.leixing === '0' ? '' : form.leixing;
                this.$axios.post(`/api/user/get_shop_pingjia`, form)
                    .then(res => {
                        if (res.code === `200`) {
                            this.commentList = res.data.pingjia_data;
                            let {chaping_shuliang, haoping_shuliang, zhongping_shuliang} = res.data.shuliang_data;
                            this.rateTypeNum.chaping_shuliang = chaping_shuliang;
                            this.rateTypeNum.haoping_shuliang = haoping_shuliang;
                            this.rateTypeNum.zhongping_shuliang = zhongping_shuliang;
                            this.total = this.rateNum(this.commentForm.leixing);
                        }
                    })
            },
            /**
             * 评价数量
             */
            rateNum(type) {
                switch (+type) {
                    case 0:
                        return this.rateTypeNum.chaping_shuliang + this.rateTypeNum.haoping_shuliang + this.rateTypeNum.zhongping_shuliang;
                    case 1:
                        return this.rateTypeNum.haoping_shuliang;
                    case 2:
                        return this.rateTypeNum.zhongping_shuliang;
                    case 3:
                        return this.rateTypeNum.chaping_shuliang;

                }
            },
            //获取优惠卷
            getTicket() {
                this.$axios.post(`/api/renwu/get_renwu`)
                    .then(res => {
                        if (res.code === '200') {
                            this.tickets = [{Id: 0, jiangli_mingcheng: '不使用优惠券'}].concat(res.data.wode_quan);
                        }
                    })
            },
            /**
             * 初始化
             */
            async init() {
                this.ruleForm.shop_id = this.commentForm.shop_id = this.$route.query.id;
                await this.getDetail();
                this.getComment();
                this.getTicket();
            }
        },
        created() {
            this.init();
        },
        //离开前重置滚动条
        beforeRouteLeave(to, from, next) {
            document.querySelector('.main').scrollTo({
                top: 0
            })
            next()
        }
    }
</script>

<style lang="less" scoped>
    #proDetail {
        .container {
            display: flex;
            padding: 10px 0;

            .content {
                flex: auto;

                .pro {
                    display: flex;

                    .sku {
                        flex: auto;
                        display: flex;
                        background-color: #FAFBFC;
                        padding: 8px 15px;

                        .el-image {
                            width: 100%;
                            height: 100%;

                        }

                        .img {
                            margin-right: 15px;
                            width: 400px;
                            max-height: 280px;

                            img {
                                border-radius: 5px;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .info {
                            flex: auto;

                            .title {
                                font-weight: bold;
                                font-size: 18px;
                            }

                            .price {
                                margin-top: 20px;
                                background: url("../assets/imgs/sku-bg.png");
                                padding: 20px;
                                display: flex;
                                align-items: center;

                                .num {
                                    flex: auto;

                                    .font-bold {
                                        font-size: 25px;
                                    }
                                }

                                .counter {
                                    flex: 0 0 35%;
                                    display: flex;
                                    text-align: center;
                                    justify-content: space-around;
                                    align-items: center;

                                    .border {
                                        width: 2px;
                                        height: 120%;
                                        background: #DCDCDC;
                                    }

                                }
                            }

                            .bottom {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }

                            .down-status {
                                position: absolute;
                                right: 12%;
                                bottom: -30px;
                                width: 80px;
                            }
                        }

                    }

                    .seller {
                        flex: 0 0 25%;
                        margin-left: 20px;
                        background-color: #FAFBFC;

                        .head {
                            display: flex;
                            background: rgba(240, 242, 245, 1);
                            padding: 8px 15px;

                            .img {
                                width: 60px;
                                margin-right: 15px;

                                img {
                                    width: 100%;
                                    margin-right: 15px;
                                }
                            }

                            .name {
                                font-size: 16px;
                                font-weight: bold;
                            }

                        }

                        .counter {
                            padding: 15px 30px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-bottom: 1px solid #DCDCDC;

                            .border {
                                width: 2px;
                                height: 120%;
                                background: #DCDCDC;
                            }

                        }

                        .foot {
                            // display: flex;
                            //justify-content: center;
                        }
                    }
                }

                .detail {
                    margin-top: 20px;
                    display: flex;

                    .introduce {
                        flex: auto;
                        margin-left: 20px;
                        padding: 8px 15px;
                        background-color: #FAFBFC;

                        /deep/ .btns {
                            .el-button {
                                border-bottom-right-radius: 0;
                                border-bottom-left-radius: 0;
                            }
                        }

                        .html {
                            min-height: 500px;
                        }

                        .comment {
                            .filter {
                                margin: 15px 0;

                                .title {
                                    padding-left: 5px;
                                    border-left: 3px solid #282828;
                                    margin-right: 15px;
                                }
                            }

                            &-item {
                                display: flex;
                                margin: 15px 0;
                                padding: 15px 0;

                                &:not(:last-child) {
                                    border-bottom: 1px solid #DCDCDC;
                                }

                                .img {
                                    margin-right: 15px;

                                    img {
                                        display: block;
                                        margin: 10px auto;
                                        width: 50px;
                                        border-radius: 50%;
                                    }
                                }
                            }
                        }

                    }
                }
            }

            .right-side {
                margin-left: 20px;
                flex: 0 0 18%;
            }
        }

        .double {
            display: flex;
            align-items: center;

            .m-b-md {
                margin-left: 25px;
            }

        }
    }
</style>
